<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区管理系统 - 住户管理</title>
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        /* 移动端表格样式 */
        @media (max-width: 768px) {
            .table-responsive {
                overflow-x: auto;
            }

            .mobile-row {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #dee2e6;
            }

            .mobile-row td {
                display: flex;
                justify-content: space-between;
                padding: 8px 12px;
            }

            .mobile-row td:before {
                content: attr(data-label);
                font-weight: bold;
                margin-right: 10px;
            }

            .mobile-row td:first-child {
                display: none;
            }
        }

        /* 表格行悬停动画 */
        .table-hover tbody tr {
            transition: all 0.2s ease;
        }

        .table-hover tbody tr:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }

        /* 按钮加载状态 */
        .btn-loading {
            position: relative;
            pointer-events: none;
        }

        .btn-loading:after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans SC', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f5f7fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 25px 0;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 100;
            border-bottom: 3px solid rgba(255, 255, 255, 0.2);
        }

        .header h1 {
            font-weight: 500;
            margin: 0;
            font-size: 2.2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* 导航栏样式 */
        .nav {
            background-color: white;
            padding: 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 99;
            border-bottom: 2px solid var(--primary-color);
        }

        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .nav ul li {
            position: relative;
        }

        .nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            padding: 20px 30px;
            display: block;
            font-weight: 500;
            transition: var(--transition);
        }

        .nav ul li a:hover,
        .nav ul li a.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
        }

        .nav ul li a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }

        /* 主内容区样式 */
        .main-content {
            display: flex;
            margin-top: 20px;
        }

        .sidebar {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-right: 20px;
            height: fit-content;
            border: 1px solid var(--border-color);
        }

        .sidebar h3 {
            color: var(--dark-color);
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-menu li {
            margin-bottom: 10px;
        }

        .sidebar-menu a {
            display: block;
            padding: 12px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 4px;
            transition: var(--transition);
        }

        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }

        .sidebar-menu i {
            margin-right: 12px;
            width: 20px;
            text-align: center;
        }

        .content {
            flex: 1;
        }

        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 25px;
            border: 1px solid var(--border-color);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
        }

        .card-header h2 {
            color: var(--dark-color);
            font-size: 1.6rem;
            margin: 0;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: var(--dark-color);
        }

        .form-control {
            width: 100%;
            padding: 12px 18px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control.border-danger {
            border-color: var(--danger-color);
            animation: shake 0.5s;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 1em;
        }

        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150%;
            height: 150%;
            background: rgba(255, 255, 255, 0.1);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s ease;
        }

        .btn-primary:hover:after {
            transform: translate(-50%, -50%) scale(1);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .btn-success {
            background-color: var(--success-color);
            color: white;
        }

        .btn-success:hover {
            background-color: #27ae60;
        }

        .btn-warning {
            background-color: var(--warning-color);
            color: white;
        }

        .btn-warning:hover {
            background-color: #e67e22;
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-danger:hover {
            background-color: #c0392b;
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }

        .btn-outline:hover {
            background-color: var(--light-color);
        }

        .btn-sm {
            padding: 8px 15px;
            font-size: 0.9rem;
        }

        .btn-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-icon i {
            margin-right: 8px;
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 25px;
        }

        .table th,
        .table td {
            padding: 15px 20px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .table th {
            background-color: var(--light-color);
            color: var(--dark-color);
            font-weight: 500;
        }

        .table tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
            transform: translateX(5px);
            transition: transform 0.3s ease;
        }

        .table .actions {
            white-space: nowrap;
        }

        /* 状态标签 */
        .badge {
            display: inline-block;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge-primary {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }

        .badge-success {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }

        .badge-warning {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }

        .badge-danger {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--danger-color);
        }

        /* 仪表盘统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 25px;
        }

        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            display: flex;
            align-items: center;
            border: 1px solid var(--border-color);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            font-size: 1.8rem;
            color: white;
        }

        .stat-icon.primary {
            background-color: var(--primary-color);
        }

        .stat-icon.success {
            background-color: var(--success-color);
        }

        .stat-icon.warning {
            background-color: var(--warning-color);
        }

        .stat-icon.danger {
            background-color: var(--danger-color);
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .action-btn i {
            font-size: 14px;
        }

        .action-btn span {
            font-size: 14px;
            white-space: nowrap;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .stat-info h3 {
            font-size: 2rem;
            margin: 0;
            color: var(--dark-color);
        }

        .stat-info p {
            margin: 8px 0 0;
            color: #777;
        }

        /* 移动端模拟 */
        .mobile-preview {
            width: 320px;
            border: 12px solid #222;
            border-radius: 30px;
            padding: 15px;
            background-color: #f5f5f5;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            margin: 0 auto;
        }

        .mobile-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            border-radius: 10px 10px 0 0;
            text-align: center;
            margin-bottom: 15px;
        }

        .mobile-nav {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            background-color: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
        }

        .mobile-nav-item {
            text-align: center;
            color: #777;
            font-size: 0.8rem;
        }

        .mobile-nav-item.active {
            color: var(--primary-color);
        }

        .mobile-nav-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                margin-right: 0;
                margin-bottom: 25px;
            }

            .nav ul {
                flex-wrap: wrap;
            }

            .nav ul li {
                margin-bottom: 8px;
            }
        }

        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr 1fr;
            }

            .mobile-preview {
                width: 280px;
            }
        }

        @media (max-width: 576px) {
            .stats-container {
                grid-template-columns: 1fr;
            }

            .nav ul li a {
                padding: 12px 18px;
                font-size: 0.9rem;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }

        /* 选项卡样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 25px;
        }

        .tab {
            padding: 12px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
        }

        .tab:hover {
            color: var(--primary-color);
        }

        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 新增：批量操作下拉菜单样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 新增：模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            transition: opacity 0.3s ease;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        .modal.active {
            display: block;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .modal-header h3 {
            margin: 0;
            color: var(--dark-color);
        }

        .close-modal {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .close-modal:hover,
        .close-modal:focus {
            color: var(--danger-color);
            text-decoration: none;
        }

        .modal-body {
            padding: 15px 0;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        /* 搜索筛选区域样式 */
        .search-filter-container {
            background-color: #f8fafc;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            border: 1px solid #e2e8f0;
        }

        .search-filters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .search-filters .form-group {
            margin-bottom: 0;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1><i class="fas fa-building"></i> 智慧社区管理系统</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="shoye.html"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="resident.html" class="active"><i class="fas fa-users"></i> 住户管理</a></li>
            <li><a href="property.html"><i class="fas fa-home"></i> 房产管理</a></li>
            <li><a href="repair.html"><i class="fas fa-tools"></i> 报修维护</a></li>
            <li><a href="fee.html"><i class="fas fa-money-bill-wave"></i> 费用管理</a></li>
            <li><a href="security.html"><i class="fas fa-shield-alt"></i> 社区安防</a></li>
            <li><a href="index.html"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
        </ul>
    </div>
    <div class="container">
        <!-- 住户管理 -->
        <div id="resident" class="section">
            <div class="main-content">
                <div class="sidebar">
                    <h3><i class="fas fa-user-cog"></i> 住户管理</h3>
                    <ul class="sidebar-menu">
                        <li><a href="#resident-list" class="active"><i class="fas fa-list"></i> 住户列表</a></li>
                        <li><a href="#resident-add"><i class="fas fa-user-plus"></i> 添加住户</a></li>
                        <li><a href="#resident-import"><i class="fas fa-file-import"></i> 批量导入</a></li>
                    </ul>
                </div>

                <div class="content">
                    <!-- 住户列表 -->
                    <div id="resident-list" class="tab-content active">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-list"></i> 住户列表</h2>
                            </div>
                            
                            <!-- 搜索筛选区域 -->
                            <div class="search-filter-container">
                                <div class="search-filters">
                                    <div class="form-group">
                                        <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">关键词搜索</label>
                                        <input type="text" id="search-input" class="form-control" placeholder="输入姓名、ID或手机号搜索">
                                    </div>
                                    <div class="form-group">
                                        <label for="type-filter" class="block text-sm font-medium text-gray-700 mb-1">住户类型</label>
                                        <select id="type-filter" class="form-control">
                                            <option value="">全部类型</option>
                                            <option value="业主">业主</option>
                                            <option value="租户">租户</option>
                                            <option value="家属">家属</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                                        <select id="status-filter" class="form-control">
                                            <option value="">全部状态</option>
                                            <option value="正常">正常</option>
                                            <option value="待缴费">待缴费</option>
                                            <option value="暂停服务">暂停服务</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- 调整后的按钮位置 -->
                                <div class="filter-actions">
                                    <button id="reset-filters" class="btn btn-outline">
                                        <i class="fas fa-refresh"></i> 重置
                                    </button>
                                    <button id="apply-filter" class="btn btn-primary">
                                        <i class="fas fa-filter"></i> 应用筛选
                                    </button>
                                </div>
                            </div>
                            
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>住户ID</th>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>房产</th>
                                        <th>住户类型</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="residentTableBody">
                                    <!-- 表格内容由JavaScript动态生成 -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 添加住户 -->
                    <div id="resident-add" class="tab-content">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-user-plus"></i> 添加住户</h2>
                            </div>
                            <form id="addResidentForm">
                                <input type="hidden" id="edit-id">
                                <div class="form-group">
                                    <label for="name">姓名</label>
                                    <input type="text" id="name" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label for="phone">手机号</label>
                                    <input type="tel" id="phone" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label for="property">关联房产</label>
                                    <select id="property" class="form-control" required>
                                        <option value="">请选择房产</option>
                                        <option value="A1001">A栋1001</option>
                                        <option value="A1002">A栋1002</option>
                                        <option value="A1003">A栋1003</option>
                                        <option value="B2001">B栋2001</option>
                                        <option value="C3001">C栋3001</option>
                                        <option value="D1502">D栋1502</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="type">住户类型</label>
                                    <select id="type" class="form-control" required>
                                        <option value="owner">业主</option>
                                        <option value="tenant">租户</option>
                                        <option value="family">家属</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </form>
                        </div>
                    </div>

                    <!-- 批量导入 -->
                    <div id="resident-import" class="tab-content">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-file-import"></i> 批量导入住户</h2>
                            </div>
                            <div class="form-group">
                                <label>下载模板文件</label>
                                <p>请先下载模板文件，按照格式填写住户信息后上传</p>
                                <button class="btn btn-outline btn-icon">
                                    <i class="fas fa-download"></i> 下载模板
                                </button>
                            </div>
                            <div class="form-group">
                                <label for="import-file">选择文件</label>
                                <input type="file" id="import-file" class="form-control">
                            </div>
                            <button class="btn btn-primary">开始导入</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑住户模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑住户信息</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="editResidentForm">
                    <input type="hidden" id="edit-resident-id">
                    <div class="form-group">
                        <label for="edit-name">姓名</label>
                        <input type="text" id="edit-name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-phone">手机号</label>
                        <input type="tel" id="edit-phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-property">关联房产</label>
                        <select id="edit-property" class="form-control" required>
                            <option value="">请选择房产</option>
                            <option value="A1001">A栋1001</option>
                            <option value="A1002">A栋1002</option>
                            <option value="A1003">A栋1003</option>
                            <option value="B2001">B栋2001</option>
                            <option value="C3001">C栋3001</option>
                            <option value="D1502">D栋1502</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-type">住户类型</label>
                        <select id="edit-type" class="form-control" required>
                            <option value="owner">业主</option>
                            <option value="tenant">租户</option>
                            <option value="family">家属</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="cancel-edit" class="btn btn-outline">取消</button>
                <button id="save-edit" class="btn btn-primary">保存修改</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始数据
            const INITIAL_RESIDENT_DATA = [
                { id: 'R1001', name: '张三', phone: '13800138000', property: 'A栋1001', type: 'owner', status: '正常' },
                { id: 'R1002', name: '李四', phone: '13900139000', property: 'A栋1002', type: 'tenant', status: '正常' },
                { id: 'R1003', name: '王五', phone: '13700137000', property: 'B栋2001', type: 'owner', status: '待缴费' },
                { id: 'R1004', name: '赵六', phone: '13600136000', property: 'C栋3001', type: 'family', status: '正常' },
                { id: 'R1005', name: '孙七', phone: '13500135000', property: 'D栋1502', type: 'tenant', status: '暂停服务' }
            ];
            
            // 从localStorage加载数据或使用初始数据
            let residentData = JSON.parse(localStorage.getItem('residentData')) || [...INITIAL_RESIDENT_DATA];
            
            // 保存数据到localStorage
            function saveData() {
                localStorage.setItem('residentData', JSON.stringify(residentData));
            }
            
            // 渲染住户列表
            function renderResidentList(data) {
                const residentTableBody = document.getElementById('residentTableBody');
                residentTableBody.innerHTML = '';
                
                if (data.length === 0) {
                    residentTableBody.innerHTML = `
                        <tr>
                            <td colspan="7" class="text-center py-8">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-search text-gray-400 text-5xl mb-4"></i>
                                    <p class="text-gray-500">未找到符合条件的住户</p>
                                </div>
                            </td>
                        </tr>
                    `;
                    return;
                }
                
                data.forEach(resident => {
                    const row = document.createElement('tr');
                    row.dataset.id = resident.id;
                    
                    const typeMap = {
                        'owner': '业主',
                        'tenant': '租户',
                        'family': '家属'
                    };
                    
                    const statusClass = {
                        '正常': 'badge-success',
                        '待缴费': 'badge-warning',
                        '暂停服务': 'badge-danger'
                    };
                    
                    row.innerHTML = `
                        <td>${resident.id}</td>
                        <td>${resident.name}</td>
                        <td>${resident.phone}</td>
                        <td>${resident.property}</td>
                        <td>${typeMap[resident.type]}</td>
                        <td><span class="badge ${statusClass[resident.status]}">${resident.status}</span></td>
                        <td class="actions">
                            <button class="btn btn-sm btn-outline edit-btn" data-id="${resident.id}"><i class="fas fa-edit"></i></button>
                            <button class="btn btn-sm btn-outline delete-btn" data-id="${resident.id}"><i class="fas fa-trash"></i></button>
                        </td>
                    `;
                    
                    residentTableBody.appendChild(row);
                });
            }
            
            // 初始渲染
            renderResidentList(residentData);
            
            // 菜单切换
            const menuLinks = document.querySelectorAll('.sidebar-menu a');
            menuLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    document.querySelectorAll('.sidebar-menu a').forEach(el => el.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
                    
                    this.classList.add('active');
                    
                    const target = this.getAttribute('href');
                    document.querySelector(target).classList.add('active');
                    
                    // 重置表单
                    document.getElementById('addResidentForm')?.reset();
                    document.getElementById('edit-id').value = '';
                });
            });
            
            // 应用筛选
            document.getElementById('apply-filter').addEventListener('click', function() {
                const searchInput = document.getElementById('search-input').value.toLowerCase();
                const typeFilter = document.getElementById('type-filter').value;
                const statusFilter = document.getElementById('status-filter').value;
                
                const filteredData = residentData.filter(resident => {
                    const matchesSearch = 
                        (!searchInput || 
                         resident.id.toLowerCase().includes(searchInput) || 
                         resident.name.toLowerCase().includes(searchInput) || 
                         resident.phone.toLowerCase().includes(searchInput));
                    
                    const matchesType = !typeFilter || {
                        '业主': 'owner',
                        '租户': 'tenant',
                        '家属': 'family'
                    }[typeFilter] === resident.type;
                    
                    const matchesStatus = !statusFilter || resident.status === statusFilter;
                    
                    return matchesSearch && matchesType && matchesStatus;
                });
                
                renderResidentList(filteredData);
            });
            
            // 重置筛选和数据
            document.getElementById('reset-filters').addEventListener('click', function() {
                // 恢复初始数据
                residentData = [...INITIAL_RESIDENT_DATA];
                saveData();
                
                // 重置表单
                document.getElementById('search-input').value = '';
                document.getElementById('type-filter').value = '';
                document.getElementById('status-filter').value = '';
                
                // 重新渲染
                renderResidentList(residentData);
                
                // 显示重置成功消息
                alert('数据已重置为初始状态');
            });
            
            // 添加住户表单提交
            const addResidentForm = document.getElementById('addResidentForm');
            addResidentForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const editId = document.getElementById('edit-id').value;
                const name = document.getElementById('name').value;
                const phone = document.getElementById('phone').value;
                const property = document.getElementById('property').value;
                const type = document.getElementById('type').value;
                
                const propertyMap = {
                    'A1001': 'A栋1001',
                    'A1002': 'A栋1002',
                    'A1003': 'A栋1003',
                    'B2001': 'B栋2001',
                    'C3001': 'C栋3001',
                    'D1502': 'D栋1502'
                };
                
                if (editId) {
                    // 编辑现有住户
                    const index = residentData.findIndex(r => r.id === editId);
                    if (index !== -1) {
                        residentData[index] = {
                            ...residentData[index],
                            name,
                            phone,
                            property: propertyMap[property],
                            type
                        };
                        saveData(); // 保存修改
                        alert('住户信息更新成功！');
                    }
                } else {
                    // 添加新住户
                    const newId = `R${1001 + residentData.length}`;
                    residentData.push({
                        id: newId,
                        name,
                        phone,
                        property: propertyMap[property],
                        type,
                        status: '正常'
                    });
                    saveData(); // 保存添加
                    alert('新住户添加成功！');
                }
                
                renderResidentList(residentData);
                addResidentForm.reset();
                document.getElementById('edit-id').value = '';
                document.querySelector('.sidebar-menu a[href="#resident-list"]').click();
            });
            
            // 编辑功能 - 打开模态框
            document.getElementById('residentTableBody').addEventListener('click', function(e) {
                if (e.target.closest('.edit-btn')) {
                    const btn = e.target.closest('.edit-btn');
                    const id = btn.dataset.id;
                    const resident = residentData.find(r => r.id === id);
                    
                    if (resident) {
                        // 填充编辑表单
                        document.getElementById('edit-resident-id').value = resident.id;
                        document.getElementById('edit-name').value = resident.name;
                        document.getElementById('edit-phone').value = resident.phone;
                        
                        // 设置房产选择
                        const propertySelect = document.getElementById('edit-property');
                        for (let i = 0; i < propertySelect.options.length; i++) {
                            if (propertySelect.options[i].text === resident.property) {
                                propertySelect.selectedIndex = i;
                                break;
                            }
                        }
                        
                        // 设置类型选择
                        document.getElementById('edit-type').value = resident.type;
                        
                        // 显示模态框
                        const modal = document.getElementById('editModal');
                        modal.classList.add('active');
                    }
                }
            });
            
            // 关闭模态框
            document.getElementById('cancel-edit').addEventListener('click', function() {
                document.getElementById('editModal').classList.remove('active');
            });
            
            document.querySelector('.close-modal').addEventListener('click', function() {
                document.getElementById('editModal').classList.remove('active');
            });
            
            // 点击模态框外部关闭
            document.getElementById('editModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('active');
                }
            });
            
            // 保存编辑
            document.getElementById('save-edit').addEventListener('click', function() {
                const id = document.getElementById('edit-resident-id').value;
                const name = document.getElementById('edit-name').value;
                const phone = document.getElementById('edit-phone').value;
                const property = document.getElementById('edit-property').value;
                const type = document.getElementById('edit-type').value;
                
                if (!name || !phone || !property || !type) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                const propertyMap = {
                    'A1001': 'A栋1001',
                    'A1002': 'A栋1002',
                    'A1003': 'A栋1003',
                    'B2001': 'B栋2001',
                    'C3001': 'C栋3001',
                    'D1502': 'D栋1502'
                };
                
                const index = residentData.findIndex(r => r.id === id);
                if (index !== -1) {
                    residentData[index] = {
                        ...residentData[index],
                        name,
                        phone,
                        property: propertyMap[property],
                        type
                    };
                    
                    saveData(); // 保存修改
                    renderResidentList(residentData);
                    document.getElementById('editModal').classList.remove('active');
                    alert('住户信息更新成功！');
                }
            });
            
            // 删除功能
            document.getElementById('residentTableBody').addEventListener('click', function(e) {
                if (e.target.closest('.delete-btn')) {
                    const btn = e.target.closest('.delete-btn');
                    const id = btn.dataset.id;
                    
                    if (confirm('确定要删除该住户信息吗？')) {
                        const index = residentData.findIndex(r => r.id === id);
                        if (index !== -1) {
                            residentData.splice(index, 1);
                            saveData(); // 保存删除操作
                            renderResidentList(residentData);
                            alert('住户信息已删除！');
                        }
                    }
                }
            });
        });
    </script>
</body>

</html>